<extend name="Public/base"/>

<block name="body">
<link rel="stylesheet" type="text/css" href="__CSS__/bootstrap-datetimepicker.css">
 <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="__JS__/jquery.nicescroll.js"></script>
<style type="text/css">
	.choosed{
		height: 100%;
	}
	.not-choosed{
		height: 100%;
	}
	.fl{
		float: left;
		margin:0 10px;
	}
	.well{
		background: #fff;
	}
	.date{
		width:220px;
		float:left;
	}
	</style>
    <div class="main-title">
        <h2>新增读书比赛</h2>
    </div>

    <form action="{:U()}" method="post" class="form-horizontal">
	  <div class="form-item">
	    <label>比赛名称</label>
	    <input type="text" class="form-control" name="book_game_name" value="">
	  </div>
	  <div class="form-item">
	    <label>比赛系列</label>
	    <select class="form-control" name="book_listid" id="series">
			<volist name="series" id="vo" key="k">
			<option value ="{$vo.id}" >{$vo.series}</option>
			</volist>
		</select>
	  </div>
	  <div class="form-item row col-md-12">
		<label class="item-label">比赛书目<span class="check-tips">（新建后不能修改）</span></label>
	 	<div id="books" class="alert alert-info col-md-6 " >
	 	
	 	</div>
	 </div>
	  <div class="form-item row col-md-12">
	  <label>比赛班级</label>
		<div style="height:334px">
			<label class="item-label fl" >参赛班级</label>
			<div class="choosed well center-block col-md-3">
			</div>
			<label class="item-label fl" >未参赛班级</label>
			<div class="not-choosed well center-block col-md-3">
			<volist name="class" id="nvo">
				<input class="btn btn-info btn-block"  type="button" name="id" value="{$nvo.class_name}-{$nvo.class_sno|substr=4,12}" data-id="{$nvo.id}" />
				</volist>
			</div>
		</div>
		 </div>
	 
	  <div class="form-item">
	  	<input type="hidden" value="" name="classids" id="ids"></input>
        <input type="hidden" value="" name="not_ids" id="not_ids"></input>
        <input type="hidden" value="" name="bookids" id="bookids"></input>
	  </div>

  <div class="form-item">
      <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
      <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
  </div>
</form>
</block>
<block name="script">
<script type="text/javascript">



</script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('ReadContest/index')}');
      
$.app = {
	students:function(){
		setChoosed();
		function setChoosed(){
			resizeScroll();
			var ids = [];
			var not_ids = [];
			$(".choosed input").each(function(){
				ids[ids.length] = $(this).data("id");
			});
			$(".not-choosed input").each(function(){
				not_ids[not_ids.length] = $(this).data("id");
			});
			$("#ids").attr("value",ids);
			$("#not_ids").attr("value",not_ids);
			$(".choosed input").unbind("click").bind("click",choose);
			$(".not-choosed input").unbind("click").bind("click",unchoose);
		}
		function choose(){
			$(this).prependTo(".not-choosed");
			$(this).removeClass('animated lightSpeedIn')
				   .addClass('animated fadeInLeft');
			setChoosed();
		}
		function unchoose(){
			$(this).prependTo(".choosed");
			$(this).removeClass('animated fadeInLeft')
			       .addClass('animated lightSpeedIn');
			setChoosed();

		}
		//重新计算滚动条
		function resizeScroll(){
			$('.choosed , .not-choosed').getNiceScroll().resize();
		}
		//此处使用niceScroll插件，好看
		$('.choosed , .not-choosed').niceScroll({
            cursorcolor: "#ccc",//#CC0071 光标颜色
            cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
            touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
            cursorwidth: "5px", //像素光标的宽度
            cursorborder: "0", // 	游标边框css定义
            cursorborderradius: "5px",//以像素为光标边界半径
            autohidemode: false //是否隐藏滚动条
        });

	},
	book:function(){
		var $books        = $("#books");
		var $bookids      = $("#bookids");
		var $book_listid  = $("#series").val();
		
		change_book($book_listid);
		
		function change_book($book_listid){
			
			var jsonObj = {'seriesid':$book_listid};
			$.post("{:U('getBooks')}",jsonObj,function(data){
				var dataObj = eval("data");
				$books.find("p").remove();//移除书目名称
				var book_ids      = [];
				for(var i = 0; i<dataObj.length; i++){
					$books.append("<p>"+dataObj[i].bookname+"</p>");//增加书目名称
					book_ids[i] = dataObj[i].bookid;
				}
				$bookids.attr("value",book_ids);
			})
		}
		$("#series").change(function(){
			var $book_listid  =  $(this).val();
			change_book($book_listid);
		})
		
	}
}
//执行
$.app.students();
$.app.book();


/* $('#startDate').datetimepicker({
	format: 'yyyy-mm-dd',
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
});
$('#startDate2').datetimepicker({
	format: 'yyyy-mm-dd',
    language:  'zh-CN',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0
}); */

</script>
</block>
